|
The first steps |
As always (if
you have followed these tutorials) we will start by opening a new
file. This time
the size is of
less importance. Set it to 300 x 100 pixels.
You have
probably seen that the New
dialog box has got three radio button on the bottom half.
This is in
short what they do: |
White* |
Sets the
background of Layer 1 to white |
Background* |
Uses the
present background colour as
background
colour for Layer 1 |
Transparent |
Sets the
background of Layer 1 to transparent |
|
*If
you use either of these you will not be able to
add effects
to Layer 1 |
|
OK, now we
have a file (work space) to work with.
Fill
Layer 1 with white colour
Note:
The reason why I didn't choose White in the New dialog box is because
I want to have
the
possibility to add effects later on.
Create
a new layer by clicking on the appropriate button on the Layer
palette
You can also
go to the Layer
menu and choose New
and then Layer
from the submenu, but
it is easier
to just click the button :)
With
the new layer active select the Elliptical mask tool |
How to: |
Click on the
Rectangular mask button, hold down the mouse
button and
move the cursor to the Elliptical mask tool button
on the pop up
tool bar. Release the mouse button |
|
Click
in the file (work space) and draw an ellipse (about 100 x 25 pixels)
by holding down
the left mouse
button and drag. |
Tip: |
When making a
series of buttons for navigation first type in
the longest
word (e.g. INFORMATION) and then draw the
mask around
the word (on a different layer, though!) |
|
Select
a colour, not too light, (I chose blue) and fill the mask
|
|
|
|
Adding effects |
Now we can
have some fun with this image. We can add filter effects to make it
jagged or
wavy. Or we
can add a texture to it. However, this time we will only make a quite
plain and
ordinary
button. Time for effects!
Right
click on the layer and choose Effects
Add
these settings: |
Shadow |
Default |
Bevel &
Emboss |
Style:
Inner bevel
Blur:
20 pixels
Highlight:
Difference
Shadow:
Bright light |
Inner glow |
Mode: Luminescence
Blur:
15 pixels
Radio button:
Middle (Center) |
|
Click OK
Now we have a
button looking like this:
|
|
|
|
Adding text |
Let's add some
text now. Keep the same blue colour you used for the button.
Select
the Text tool and
click on your button
Set the
font to Helvetica, style to Regular and the size to 20
Type in
the word "Contact" (without the quotes)
Below the OK
and Cancel buttons
there are three buttons for aligning text (like in a word
processor)
Click
on the button for Center aligned text
As you can see
your text changes position. This is because you have changed the starting
point for the
text from left to center (i.e. the center part f the text is now
where starting
point was before).
With
the mouse position the text in the center of the button
If your are
making a set of buttons using the Center align is a very good idea.
All you have
to do with the
additional buttons is to change the text. Because of the center
alignment it will
always be
right in the center of the buttons.
Click OK
This is the
way the button looks now:
|
|
|
|
Adjusting
the opacity |
We are not
going to add any effects to this text, but we are going to do
something. This:
Make
sure the text layer is active
On the Layer
palette there are two drop down list boxes
(or so it seems) at the top.
Click
the arrow button on the one labeled Opacity
A slider appears
Push
the slider to set opacity to 60 %
Now the text
seems to be floating inside the button.
|
Let's settle
for this look and be satisfied. Save the file. We will use it again
later on to make
the button
look different. Something like this:
Interested?
Then click here! |
|